<template>
  <div v-if="card_infos.length" class="total">
    <bigTitle msg="全部函数"></bigTitle>
    <activeCard :data="card_info" />
    <div class="invoke_title">
      <bigTitle msg="调用"></bigTitle>
      <div @click="invokeBtn" class="invoke_btn">
        <img :src="invoke_svg" /> 请求
      </div>
    </div>
    <div class="double_invoke">
      <input
        type="text"
        v-model="invoke_body"
        class="left_invoke"
        placeholder="请在此输入请求体"
      />
      <input
        type="text"
        disabled
        :value="ret_data"
        class="right_invoke"
        placeholder="返回的Response"
      />
    </div>
    <div class="func_container">
      <funcCard
        v-bind:key="item"
        @click="tapCard(index)"
        v-for="(item, index) in card_infos"
        :selected="index == select_idx"
        :data="item"
      />
    </div>
  </div>
</template>

<script>
import bigTitle from "../component/title.vue";
import tipTitle from "../component/tipTitle.vue";
import activeCard from "../component/active_card.vue";
import funcCard from "../component/func_card.vue";
var { post } = require("../../Middleware/mid_request");
export default {
  methods: {
    invokeBtn() {
      this.getData();
      post({
        url: "/invoke_function",
        data: {
          func: this.$data.card_infos[this.$data.select_idx].name,
          cont: this.$data.invoke_body.toString(),
        },
        success: (res) => {
          console.log(res.data.data);
          this.$data.ret_data = JSON.stringify(res.data.data);
        },
      });
    },
    tapCard(idx) {
      this.$data.select_idx = idx;
      this.getData();
    },
    getData() {
      post({
        url: "/get_function_total",
        success: (res) => {
          res.data.data = res.data.data.sort(function (a, b) {
            return a.run_time - b.run_time;
          });
          this.$data.card_info = res.data.data[this.$data.select_idx];
          this.$data.card_infos = res.data.data;
        },
      });
    },
  },
  created: function () {
    this.getData();
  },
  name: "totalPage",
  data: function () {
    return {
      ret_data: "",
      invoke_body: "",
      select_idx: 0,
      invoke_svg: require("../../assets/invoke.svg"),
      card_infos: [],
      card_info: {},
    };
  },
  components: {
    bigTitle,
    tipTitle,
    activeCard,
    funcCard,
  },
  props: {
    msg: String,
  },
};
</script>

<style scoped>
.func_container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.left_invoke,
.right_invoke {
  margin-top: 10px;
  width: 350px;
  height: 50px;
  background: #eeeeee;
  border: 1px solid #bbbbbb;
  box-sizing: border-box;
  border-radius: 7.5px;
  margin-right: 10px;
  padding: 0 10px;
  font-size: 16px;
  outline: none;
}
.invoke_btn img {
  width: 18px;
  height: 18px;
}
.invoke_btn:hover {
  background: #1f59cd;
}
.invoke_btn {
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
  margin-top: 20px;
  margin-left: 15px;
  background: #3e7cf4;
  padding: 5px 20px;
  color: white;
  border-radius: 100px;
  display: flex;
  align-items: center;
}
.invoke_title {
  display: flex;
  align-items: center;
}
.total {
  font-size: 30px;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}
</style>
